<template lang="pug">
.page-index
  .index-header
    .container
      .row
  .youzhan-count
    .container
      .row
        .col-md-3.col-xs-12
          .count-item
            i-count-up(
              :start="0"
              :end="300"
              :decimals="0"
              :duration="2.5"
              :options="options"
              :callback="callback")
            span.plus +
            p.desc 来自一线互联网公司的大咖
        .col-md-3.col-xs-12
          .count-item
            i-count-up(
              :start="0"
              :end="3000"
              :decimals="0"
              :duration="2.5"
              :options="options"
              :callback="callback")
            span.plus +
            p.desc 来自垂直领域优质网站
        .col-md-3.col-xs-12
          .count-item
            i-count-up(
              :start="0"
              :end="1000"
              :decimals="0"
              :duration="2.5"
              :options="options"
              :callback="callback")
            span.plus +
            p.desc 优质收藏夹
        .col-md-3.col-xs-12
          .count-item
            i-count-up(
              :start="0"
              :end="500"
              :decimals="0"
              :duration="2.5"
              :options="options"
              :callback="callback")
            span.plus +
            p.desc 签约认证的网站
  .member-fav
    .container
      .row
        .col-md-4.col-md-offset-2.col-xs-12
          .desc
            p 发现美好，共享知识
            p 打造属于自己的收藏夹
        .col-md-4.col-xs-12
          ul
            li
              .item
                i.fa.fa-window-minimize.red
                span 分享自己的经验，让一部分人先知先觉
            li
              .item
                i.fa.fa-window-minimize.mauve
                span 快速获得垂直行业的专业信息
            li
              .item
                i.fa.fa-window-minimize.yellow
                span 开阔视窗，自由的创作平台
            li
              .item
                i.fa.fa-window-minimize.yellow
                span 开阔视窗，自由的创作平台

  .member-fav(style="background:white;color:#333")
    .container
      .row
        .col-md-4.col-md-offset-2.col-xs-12
          ul
            li
              .item
                i.fa.fa-window-minimize.red
                span 分享自己的经验，让一部分人先知先觉
            li
              .item
                i.fa.fa-window-minimize.mauve
                span 快速获得垂直行业的专业信息
            li
              .item
                i.fa.fa-window-minimize.yellow
                span 开阔视窗，自由的创作平台
            li
              .item
                i.fa.fa-window-minimize.yellow
                span 开阔视窗，自由的创作平台
        .col-md-4.col-xs-12
          .desc
            p 发现美好，共享知识
            p 打造属于自己的收藏夹
  .member-list
    .container
      .row.header
        h1 热门用户
      .row
        .col-md-3.col-xs-12(v-for="i in 4")
          .member-item
            img(src="../../assets/images/jenny.jpg" width='100')
            p.name Mankong
            p.desc 优站极大的提高了我的工作效率

</template>
<script>
import ICountUp from '@/components/iCountUp'
export default {
  components: {
    ICountUp
  },
  data () {
    return {
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      },
      tags: ['开发', '设计', '产品', '运营', '创业']
    }
  },
  methods: {
    callback: function (ins) {
      // ins.update(ins.endVal + 100)
    }
  }
}
</script>
<style lang="stylus">
.iCountUp {
    font-size: 36px;
    margin: 0;
    color: #6c6c6c;
  }
</style>

